<template>
  <div class="City">
    <van-nav-bar
      title="城市列表"
      left-text=""
      left-arrow
      @click-left="$router.back()"
    />

    <van-index-bar
      :sticky-offset-top="46"
      :index-list="indexList"
      highlight-color="#21b97a"
    >
      <!-- 当前城市 -->
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="city" />
      <!-- 热门城市 -->
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        v-for="(item, index) in hotCity"
        :key="index"
        :title="item.label"
        @click="changeLocal(item.label, item.value)"
      />
      <!-- /热门城市 -->
      <van-index-anchor v-for="item in Initials" :key="item" :index="item">
        {{ item }}
        <van-cell
          v-for="(item, index) in cityList.filter((item2) => {
            return item2.short.split('')[0].toUpperCase() === item
          })"
          :key="index"
          @click="changeLocal(item.label, item.value)"
          :title="item.label"
        ></van-cell>
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { getCityList, getHotCityList } from '@/api/area.js'
import { Toast } from 'vant'
import { mapState, mapMutations } from 'vuex'
import { setStorage } from '@/utils/storage.js'
export default {
  name: 'City',
  data () {
    return {
      cityList: [],
      hotCity: [],
      indexList: ['#', '热'],
      title: '城市列表'
    }
  },
  computed: {
    Initials () {
      return [
        ...new Set(
          this.cityList.map((item) => item.short.split('')[0].toUpperCase())
        )
      ].sort()
    },
    ...mapState(['city'])
  },
  created () {
    this.getCityList()
    this.getHotCityList()
  },

  methods: {
    ...mapMutations(['getCityName', 'getLocalCityId']),
    async getCityList () {
      const loading = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0 // 持续展示 toast
      })
      try {
        const res = await getCityList()
        this.cityList = res.data.body
        this.indexList.push(...this.Initials)
        loading.clear()
      } catch (error) {
        Toast.fail('城市列表失败')
      }
    },
    async getHotCityList () {
      try {
        const res = await getHotCityList()
        console.log(res)
        this.hotCity = res.data.body
      } catch (error) {
        console.log(error)
      }
    },
    changeLocal (val, value) {
      this.getCityName(val)
      this.getLocalCityId(value)
      this.$router.back()
      setStorage('HZK-LOCALCITY', val)
      setStorage('HZK-LOCALCITYID', value)
    }
  }
}
</script>

<style scoped lang="less">
.City {
  /deep/.van-nav-bar {
    background-color: #21b97a;
    .van-nav-bar__title {
      font-size: 18px;
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
    .iconFont {
      color: #fff;
      font-size: 18px;
    }
  }
  // .van-index-bar {
  //   .van-cell {
  //     border-bottom: 1px solid #eee;
  //     /deep/span {
  //       color: #333;
  //       font-size: 16px;
  //     }
  //   }
  //   /deep/.van-index-bar__sidebar {
  //     .van-index-bar__index {
  //       padding-top: 15px;
  //     }
  //   }
  // }
}
</style>
